<template>
  <div class="app-container calendar-list-container">
    <!-- 搜索工具栏 -->
    <section>
      <so-tool-bar :toolData="toolData" :query="listQuery" @search="search"/>
    </section>
    <!-- 其他操作 -->
    <section class="filter-container">
      <el-row>
        <el-col :span="8">
          <el-button class="filter-item" type="primary" size="small" @click="upAndownPro(1)">上架</el-button>
          <el-button class="filter-item" type="primary" size="small" @click="upAndownPro(0)">下架</el-button>
          <el-button class="filter-item" type="primary" size="small" @click="topStatus(1)">置顶</el-button>
          <el-button class="filter-item" type="primary" size="small" @click="topStatus(0)">取消置顶</el-button>
        </el-col>
        <el-col :span="16">
          <section style="float: right">
            <el-button class="filter-item" type="danger" size="small" @click="delRows">批量删除</el-button>
            <el-button class="filter-item" type="primary" size="small" @click="createForm">创建问卷</el-button>
          </section>
        </el-col>
      </el-row>
    </section>
    <!-- 表格 -->
    <el-table :data="tableList" v-loading="loading" element-loading-text="正在查询中。。。"
        stripe highlight-current-row @selection-change="handleSelectionChange" @cell-click='handleRowHandle'>
        <el-table-column align="center" type="selection" width="55"/>
        <el-table-column align="center" width="100" label="状态" prop="close_status">
          <template slot-scope="scope">
            <el-tag size="mini" :type="scope.row.close_status==1?'success':'danger'">{{ t_status[scope.row.close_status] }}</el-tag>
          </template>
        </el-table-column>
         <el-table-column align="center" width="30">
        <template slot-scope="scope">
          <i class="iconfont ali-zhiding" v-show="scope.row.top_status == 1"></i>
        </template>
        </el-table-column>
        <el-table-column align="center" label="问卷名称" prop="id" show-overflow-tooltip>
          <template slot-scope="scope">
            <span style="padding-right:10px;cursor: pointer">{{ scope.row.questionnaire_title }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="创建时间" prop="create_time">
        </el-table-column>
        <!-- <el-table-column align="center" label="回收量">
          <template slot-scope="scope">
              <p style="cursor: pointer">{{ scope.row.create_time }}</p>
          </template>
        </el-table-column> -->
        <el-table-column align="center" show-overflow-tooltip label="详细数据">
          <template slot-scope="scope">
            <span style="cursor: pointer">{{ scope.row.questionnaire_desc }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="浏览量">
          <template slot-scope="scope">
            <p>{{ scope.row.browse_nums || 0 }}</p>
          </template>
        </el-table-column>
        <!-- <el-table-column align="center" label="回收率" prop="nums">
        </el-table-column> -->
        <!-- <el-table-column align="center" label="开始答题时间" width="120" prop="look">
        </el-table-column>      -->
        <el-table-column align="center" label="平均答题时间（分钟）">
          <template slot-scope="scope">
            <p>{{ scope.row.answer_avgtime || 0 }}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="列表链接">
          <template slot-scope="scope">
            <el-button
              v-clipboard:copy="'https://cloud.anyolife.com/SurveryList'"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              type="text"
            >复制链接</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="详情链接">
          <template slot-scope="scope">
            <el-button
              v-clipboard:copy="'https://cloud.anyolife.com/SurveyDetails' + '?id=' + scope.row.id + '&name=' + 'home'"
              v-clipboard:success="onCopy"
              v-clipboard:error="onError"
              type="text"
            >复制链接</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
              <i class="iconfont ali-edit-2" @click="editForm(scope.row)"></i>
              &nbsp;
              <i class="iconfont ali-bin" @click="delRow(scope.row)"></i>
          </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <section>
      <so-pagination :query="listQuery" @initList="initList"/>
    </section>
  </div>
</template>

<script>
import { questionnaire_list, questionnaire_delete, questionnaire_deleteAll, questionnaire_updateCloseStatus,questionnaire_updateTopStatus } from "@/api/questionnaire";
import { searchTool } from "@/utils";
import SoPagination from '@/components/SoPagination'
import SoToolBar from "@/components/SoToolBar";
import { toolData } from "./question";

export default {
  name: "question",
  components: { SoPagination, SoToolBar },
  data() {
    return {
      toolData: toolData, //工具栏初始化
      loading: false,
      tableList: [],
      t_status: ['下架','上架'],
      multipleSelection: [],
      listQuery: { start: 0, limit: 10, total: 0, current: 1 }
    };
  },
  methods: {
    onCopy: function() {
      this.$message({
        type: "success",
        message: "复制成功"
      });
    },
    onError: function() {
      this.$message.error("复制失败");
    },
    async delRows(){//批量删除
      if (this.multipleSelection.length == 0) {
        this.$message.warning("请先选择需要调整单元");
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      try {
        const res = await this.$confirm("确认删除吗？");
        if (res == "confirm") {
          this.loading = true;
          const { data } = await questionnaire_deleteAll({array: ids});
          if (data.status == 100) {
            this.$message.success("删除成功");
          }
          this.initList();
        }
      } catch (error) {

      }
    },
    async delRow(row) {  //删除
      try {
        let res = await this.$confirm("确认删除吗？");
        if (res == "confirm") {
          this.loading = true;
          let { data } = await questionnaire_delete({id:row.id});
          if (data.status == 100) {
            this.$message.success("删除成功");
          }
          this.initList();
          this.loading = false;
        }
      } catch (error) {

      }
    },
      async topStatus(e){//批量置顶，取消置顶
      console.log(e,'eeeeeeeeeeee')
       if(this.multipleSelection.length == 0){
          this.$message.warning("请先选择需要调整的单元");
          return;
       }
       this.loading = true;
       let ids = this.multipleSelection.map(item =>{ return item.id }).join()
       let {data} = await questionnaire_updateTopStatus({ ids:ids, top_status:e })
        this.loading = false;
      if (data.status === 100) {
        this.$message.success('操作成功')
        await this.initList();
      }
    },
    async createForm() { //创建问卷
      this.$router.push({
        path: "/other/createQuestion",
        query: {
          name: "add"
        }
      });
    },
    async editForm(data) { //编辑问卷
      this.$router.push({
        path: "/other/createQuestion",
        query: {
          name: "edit",
          id:data.id
        }
      });
    },
    //点击跳转到详情页
    handleRowHandle(row, cell) {
      if (cell.label == "问卷名称") {
        this.$router.push({
          path: "/other/questionDetail",
          query: {
            id:row.id
          }
        });
      }
      // if (cell.label == "回收量") {
      //   this.$router.push({
      //     path: "/other/edit",
      //     query: {
      //       id: 1
      //     }
      //   });
      // }
      if (cell.label == "详细数据") {
        this.$router.push({
          path: "/other/detailed",
          query: {
            id: row.id
          }
        });
      }
    },
    handleSelectionChange(e) {
      this.multipleSelection = e;
    },

    async upAndownPro(e){//1 上架 0下架
      if(this.multipleSelection.length == 0){
        this.$message.warning('请先选择需要调整单元');
        return;
      }
      const ids = this.multipleSelection.map(item => item.id).join();
      this.loading = true;
      let { data } = await questionnaire_updateCloseStatus({ids: ids, close_status: e});
      this.loading = false;
      if(data.status == 100){
        await this.initList();
        this.$message.success(`${this.t_status[e]}成功`);
      }
    },
    search() {//搜索
      let keyWords = {key: 'searchDate', names: ['create_starttime', 'create_endtime']}
      this.listQuery = searchTool(this.listQuery, keyWords);
      this.initList();
    },
    async initList() {  //获取所有数据
        this.loading = true
        const query = {...this.listQuery, company_id: localStorage.getItem('companyId') - 0};
        const { data } = await questionnaire_list(query);
        this.loading = false
        if(data.status == 100){
          this.tableList = data.data.rows;
          this.listQuery.total = data.data.results;
        }
    }
  },
  created() {
    this.initList();
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.container-top {
  background-color: #fff;
  padding: 20px 20px 0 20px;
}
.data-show {
  margin-top: 10px;
  background-color: #fff;
  padding: 20px;
}
.num-text {
  padding-left: 10px;
  color: #606266;
}
.ali-edit-2 {
  cursor: pointer;
  color: #e6a23d;
}
.ali-bin {
  margin-left: 5px;
  cursor: pointer;
  color: #f56c6c;
}
.table-box {
  padding: 20px 0;
}
.ali-zhiding{
  color: #009900;
  font-size: 20px;
}
</style>
